<template>
  <template class="center-center" v-for="(item, index) in dialogList" :key="index">
    <div class="center-center" v-show="item.show">
      <el-dialog
        :title="item.title"
        :width="item.width"
        v-model="item.visible"
        :modal="false"
        :z-index="1000"
        :close-on-click-modal="false"
        @close="() => closeDialog(item, index, '', true)"
      >
        <component class="full" :is="item.component" v-bind="item.props" @close="(...args:any) => closeDialog(item, index, args)" />
      </el-dialog>
    </div>
  </template>
</template>

<script setup lang="ts">
import { dialogList, closeDialog, init } from "./index"
import { useRouter } from "vue-router"
import { watch } from "vue"
const router = useRouter()
watch(
  () => router.currentRoute.value.path,
  (val, old) => {
    dialogList.forEach((item) => {
      console.log(old, "item", item.pathKey)
      if (item.pathKey == old) {
        item.show = false
      } else {
        item.show = true
      }
    })
    console.log(val, old)
  }
)
init(router)
</script>

<style>
.el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.el-dialog .el-dialog__title{
  font-size: 22px;
  font-weight: bold;
  color: #0A1629;
  line-height: 26px;
}
.el-dialog .el-dialog__body{
  flex:1;
  overflow: auto;
}


</style>
